<template>
  <div class="page-table-container">
    <template v-if="data.length">
      <el-table
        v-if="TABLEHEIGHT"
        class="page-table-main"
        :data="data"
        border
        stripe
        :max-height="TABLEHEIGHT"
      >
        <template v-for="column in columns">
          <el-table-column
            v-if="!column.slot"
            :prop="column.prop"
            :label="column.label"
            :width="column.width || 200"
            :fixed="column.fixed"
          ></el-table-column>
          <slot v-else :name="column.slot"> </slot>
        </template>
      </el-table>
      <div class="page-table-footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-size="page.pageSize"
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </template>
    <el-empty :image-size="200" v-else></el-empty>
  </div>
</template>

<script>
import TableHeight from '../mixins/TableAutoHeight.js'
export default {
  mixins: [TableHeight(120)], //参数是底部分页与顶部表单之和
  props: {
    data: {
      require: true,
      type: Array,
      default: () => []
    },
    columns: {
      require: true,
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      page: {
        pageSize: 10,
        pageNum: 10
      }
      // Height: 'calc(100% - 60px)'
    }
  },
  mounted() {
    console.log(this.TABLEHEIGHT)
    console.log(this.columns)
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>
<style lang="scss" scoped>
.page-table-container {
  // flex: 1;
  width: calc(100% - 200px);

  display: flex;
  flex-direction: column;
  // padding: 20px;
  .page-table-main {
    // padding: 20px;
  }
  .page-table-footer {
    height: 50px;
    text-align: right;
    width: 100%;
    // margin: 20px;
    position: fixed;
    bottom: 0px;
    right: 20px;
  }
}
</style>
